<script setup>
import {onMounted, ref} from "vue";
import {list, remove, save} from "@/api/class";
import {ElMessage} from "element-plus";
import {list as gradeList} from "@/api/grade";
import {list as roomList} from "@/api/room"

let data = ref()
onMounted(() => {
  list().then(res => {
    data.value = res.data
    console.log(data.value)
  })

})
let grades = ref()
let del = (id) => {
  remove(id).then(res => {
    ElMessage.success("删除成功!")
    list().then(res => {
      data.value = res.data
      console.log(data.value)
    })
  })
}

let add = () => {
  dialog.value = true
  gradeList().then(res => {
    grades.value = res.data;
  })
  roomList().then(res => {
    rooms.value = res.data
  })
}
let bodyData = ref({
  "name": "",
  "gradeId": null,
  "roomId": null,
  "startTime": null,
  "endTime": null
})
let dialog = ref(false)
let rooms = ref()
let value1 = ref()
const shortcuts = [
  {
    text: '今天',
    value: new Date(),
  },
  {
    text: '昨天',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return date
    },
  },
  {
    text: '一星期前',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      return date
    },
  },
]
let addSave = () => {
  save(bodyData.value).then(res => {
    list().then(res => {
      data.value = res.data
      console.log(data.value)
      ElMessage.success("添加成功!")
    })
  })
}
</script>

<template>
  <div>
    <div>
      <el-dialog v-model="dialog" title="saveClass" width="400">
        <el-input v-model="bodyData.name" placeholder="请输入课程名称" style="margin-bottom: 5px"/>
        <el-select v-model="bodyData.gradeId" placeholder="请选择班级">
          <el-option v-for="itm in grades"
                     :key="itm.id"
                     :label="itm.name"
                     :value="itm.id"
          >{{ itm.name }}
          </el-option>
        </el-select>
        <el-select v-model="bodyData.roomId" placeholder="请选择教室" style="margin-top: 5px">
          <el-option v-for="itm in rooms"
                     :key="itm.id"
                     :label="itm.name"
                     :value="itm.id"
          >{{ itm.name }}
          </el-option>
        </el-select>
        <div style="margin-top: 5px">
          <div class="block">
            <span class="demonstration">开始时间：</span>
            <el-date-picker
                v-model="bodyData.startTime"
                :shortcuts="shortcuts"
                placeholder="请选择开始时间"
                type="datetime"
            />
          </div>
          <div class="block" style="margin-top: 10px">
            <span class="demonstration">结束时间：</span>
            <el-date-picker
                v-model="bodyData.endTime"
                :shortcuts="shortcuts"
                placeholder="请选择结束时间"
                type="datetime"
            />
          </div>
        </div>
        <el-button style="margin-left: 300px;margin-top: 10px" type="primary" @click="addSave">提交</el-button>
      </el-dialog>
    </div>
    <div style="margin-left: 20px">
      <h1>排课</h1>
    </div>
    <div style="margin: 20px 20px">
      <el-button @click="add">添加课程</el-button>
    </div>
    <div>
      <el-table :data="data">
        <el-table-column label="课名" prop="name"/>
        <el-table-column label="上课班级" prop="gradeName"/>
        <el-table-column label="教室名称" prop="classRoomName"/>
        <el-table-column label="开始上课时间" prop="startTime"/>
        <el-table-column label="结束上课时间" prop="endTime"/>
        <el-table-column #default="{row}" label="操作">
          <el-button size="small" type="danger" @click="del(row.id)">删除</el-button>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>


